<template>
  <div class="backgroundPaper">
    <div class="title">Submit an Article</div>
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="Article info" @click.native="stepChange(0)"></el-step>
      <el-step title="Author info" @click.native="stepChange(1)"></el-step>
      <el-step title="Suggested Edtior" @click.native="stepChange(2)"></el-step>
      <el-step title="Upload" @click.native="stepChange(3)"></el-step>
      <el-step title="Check info" @click.native="stepChange(4)"></el-step>
    </el-steps>
    <div v-show="active == 0">
      <div style="width: 100%;float:right;margin-top:5.2%"></div>
      <div class="articleInfoStyle">
        <el-input
          type="textarea"
          :rows="3"
          v-model="articleInfoTitle"
          style="width:72.22%; float:right;"
          :autosize="{ minRows: 3, maxRows: 3}"
        ></el-input>
        <div class="littleTitle">
          <font color="red">*</font> Title
        </div>
      </div>
      <div class="articleInfoStyle" style="padding-top:3.2%">
        <el-input
          type="textarea"
          :rows="6"
          v-model="articleInfoAbstract"
          style="width:72.22%; float:right;"
          :autosize="{ minRows: 6, maxRows: 6}"
        ></el-input>
        <div class="littleTitle">
          <font color="red">*</font> Abstract
        </div>
      </div>
      <div class="articleInfoStyle" style="padding-top:3.2%">
        <el-input
          placeholder="Keyword separated by comma"
          type="textarea"
          :rows="3"
          v-model="articleInfoKeywords"
          style="width:72.22%; float:right;"
          :autosize="{ minRows: 3, maxRows: 3}"
        ></el-input>
        <div class="littleTitle">
          <font color="red">*</font> Keywords
        </div>
      </div>
      <div class="articleInfoStyle" style="padding-top:3.2%">
        <el-button
          style="float:right;width:22.22%;background: #527FA5; color: #FFFFFF; border: 1px solid #244158;"
          @click="pageControl(1)"
          type="primary"
        >Next step</el-button>
      </div>
    </div>
    <div v-show="active == 1">
      <div v-show="authorTableData.length == 0" style="margin-top:4%">
        <div class="dialogTitle" style="margin-top:3.7%">Add Author</div>
        <div style="width: 90%;float:right;margin-top:3%;margin-right:10%">
          <el-select
            v-model="authorInfoTitle"
            placeholder="Please select a title"
            style="width:72.22%; float:right;"
            size="small"
            @change="currentSel"
            value-key="value"
          >
            <el-option
              v-for="item in titles"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <div class="littleTitle">Title</div>
        </div>

        <div style="width: 90%;float:right; padding-top:3%;margin-right:10%">
          <el-input v-model="authorInfoFirstName" style="width:72.22%; float:right;" size="small"></el-input>
          <div class="littleTitle">First Name</div>
        </div>
        <div style="width: 90%;float:right; padding-top:3%;margin-right:10%">
          <el-input v-model="authorInfoFamilyName" style="width:72.22%; float:right;" size="small"></el-input>
          <div class="littleTitle">Family Name</div>
        </div>
        <div style="width: 90%;float:right; padding-top:3%;margin-right:10%">
          <el-input v-model="authorInfoAffiliation" style="width:72.22%; float:right;" size="small"></el-input>
          <div class="littleTitle">Affiliation</div>
        </div>
        <div style="width: 90%;float:right; padding-top:3%;margin-right:10%">
          <el-input v-model="authorInfoEmail" style="width:72.22%; float:right;" size="small"></el-input>
          <div class="littleTitle">E-mail</div>
        </div>
        <div style="width: 90%;float:right; padding-top:3%;margin-right:10%">
          <el-button
            style="float:right;width:10%;background: #527FA5; color: #FFFFFF; border: 1px solid #244158;"
            @click="saveData(0)"
            type="primary"
          >Save</el-button>
        </div>
        <div style="width: 90%;float:right; padding-top:9.1%">
          <el-button
            style="float:right;width:22.22%;margin-left: 1.8%; background: #CBD8E4; color: #FFFFFF;;margin-right:10%"
            @click="pageControl(1)"
            disabled
          >Next step</el-button>
          <el-button
            style="float:right;width:22.22%;color: #527FA5; border: 1px solid #527FA5;"
            @click="pageControl(0)"
          >Previous step</el-button>
        </div>
      </div>
      <div v-show="authorTableData.length != 0">
        <div style="width: 100%;float:right;margin: 0 auto;">
          <el-table
            :data="authorTableData"
            style="width: 90%; float:right; margin-right: 5%;"
            row-key="mail"
          >
            <el-table-column min-width="30">
              <div class="drag"></div>
            </el-table-column>
            <!--装饰用可拖动标志-->
            <el-table-column label="Author info" prop="name" min-width="300">
              <template slot-scope="scope">
                <div>
                  <div class="tableTitle">Name:</div>
                  {{ scope.row.firstName }} {{ scope.row.familyName }}
                </div>
                <div>
                  <div class="tableTitle">Affiliation:</div>
                  {{ scope.row.affiliation }}
                </div>
                <div>
                  <div class="tableTitle">E-mail:</div>
                  {{ scope.row.mail }}
                </div>
              </template>
            </el-table-column>
            <!--核心数据-->
            <el-table-column label="Corresponding" min-width="80">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.row.index"
                  v-model="templateRadio"
                  @change.native="getTemplateRow(scope.$index,scope.row)"
                >&nbsp;</el-radio>
              </template>
            </el-table-column>
            <!--单选框-->
            <el-table-column type="index" prop="order" min-width="80"></el-table-column>
            <!--顺序-->
            <el-table-column min-width="40">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="editRow(scope.$index, scope.row, 0)">
                  <i class="el-icon-edit-outline"></i>
                </el-button>
                <el-button size="mini" type="text" @click="deleteRow(scope.$index, 0)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </template>
            </el-table-column>
            <!--删除和编辑-->
          </el-table>
          <div class="hint" style="margin-left:10%">The list can be dragged.</div>
          <div style="width: 100%;float:right; padding-top:1%">
            <div class="bor">
              <el-button
                type="text"
                size="mini"
                @click="addAuthorVisible = true;"
                style="font-family: PingFang SC;
                      font-style: normal;
                      font-weight: 500;
                      font-size: 18px;
                      line-height: 25px;
                      text-align: right;
                      color: #C1C4CB;
                      width: 10.9%;
                      "
              >+Add author</el-button>
            </div>
          </div>
          <el-dialog :visible.sync="editAuthorVisible" width="52.083%">
            <div class="dialogTitle">Edit Author</div>
            <div style="margin-right: 10%; margin-top:4%">
              <div style="width: 100%;float:right;">
                <el-select
                  v-model="editAuthorTitle"
                  placeholder="Please select a title"
                  style="width:65%; float:right;"
                  size="small"
                  @change="currentSel"
                  value-key="value"
                >
                  <el-option
                    v-for="item in titles"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <div class="littleTitle">Title</div>
              </div>
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="editAuthorFirstName"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">First Name</div>
              </div>
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="editAuthorFamilyName"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">Family Name</div>
              </div>

              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="editAuthorAffiliation"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">Affiliation</div>
              </div>
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input v-model="editAuthorEmail" style="width:65%; float:right;" size="small"></el-input>
                <div class="littleTitle">E-mail</div>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <div style="width: 100%;float:right; padding-top:6%; margin-right: 10%"></div>
              <el-button
                @click="editAuthorVisible=false"
                style="width:10%;color: #527FA5; border: 1px solid #527FA5;; margin-right: 2%;"
              >Cancel</el-button>
              <el-button
                @click="saveRow(0)"
                style="width:10%; background: #527FA5; color: #FFFFFF; margin-right: 10%;"
              >Save</el-button>
            </span>
          </el-dialog>
          <el-dialog :visible.sync="addAuthorVisible" width="52.083%">
            <div class="dialogTitle">Add Author</div>
            <div style="margin-right: 10%; margin-top:4%">
              <div style="width: 100%;float:right;">
                <el-select
                  v-model="addAuthorTitle"
                  placeholder="Please select a title"
                  style="width:65%; float:right;"
                  size="small"
                  @change="currentSel"
                  value-key="value"
                >
                  <el-option
                    v-for="item in titles"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <div class="littleTitle">Title</div>
              </div>

              <div style="width: 100%;float:right; padding-top:3%">
                <el-input v-model="addAuthorFirstName" style="width:65%; float:right;" size="small"></el-input>
                <div class="littleTitle">First Name</div>
              </div>
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="addAuthorFamilyName"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">Family Name</div>
              </div>
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="addAuthorAffiliation"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">Affiliation</div>
              </div>
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input v-model="addAuthorEmail" style="width:65%; float:right;" size="small"></el-input>
                <div class="littleTitle">E-mail</div>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <div style="width: 100%;float:right; padding-top:6%; margin-right: 10%"></div>
              <el-button
                @click="addAuthorVisible = false;"
                style="width:10%;color: #527FA5; border: 1px solid #527FA5;; margin-right: 2%;"
              >Cancel</el-button>
              <el-button
                @click="saveRow(2)"
                style="width:10%; background: #527FA5; color: #FFFFFF; margin-right: 10%;"
              >Save</el-button>
            </span>
          </el-dialog>
          <div style="width: 90%;float:right; padding-top:23.5%; margin-right:10%">
            <el-button
              style="float:right;width:22.22%;margin-left: 1.8%; background: #527FA5; color: #FFFFFF;"
              @click="pageControl(1)"
            >Next step</el-button>
            <el-button
              style="float:right;width:22.22%;color: #527FA5; border: 1px solid #527FA5;"
              @click="pageControl(0)"
            >Previous step</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-show="active == 2">
      <div class="prompt" v-show="suggestedTableData.length == 0">
        <div class="promptText">
          Please suggest the editor and/or the referees for your paper.
          <br />If there is no suggestion, you may go to next page directly by clicking Next step at the bottom. Please be noted that you can go back to this page at anytime before submiting the paper.
        </div>
      </div>
      <div class="dialogTitle" style="margin-top:2.9%;">Add Editor</div>
      <div style="width: 100%;float:right;margin-top:2%">
        <el-select
          v-model="selectedName"
          placeholder="Please select an editor"
          style="width:65%; float:right; margin-right:10%; margin-bottom:4%"
          size="small"
          @change="currentSel"
          value-key="id"
        >
          <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item"></el-option>
        </el-select>
        <div class="littleTitle">Suggested Editor</div>
        <!--建议编辑-->
      </div>

      <div v-show="suggestedTableData.length == 0">
        <div class="dialogTitle">Add referee</div>

        <div style="width: 90%;float:right;margin-top:4%;margin-right:10%">
          <el-input
            v-model="suggestedRefereeFirstName"
            style="width:72.22%; float:right;"
            size="small"
          ></el-input>
          <div class="littleTitle">First Name</div>
        </div>
        <div style="width: 90%;float:right;margin-top:4%;margin-right:10%">
          <el-input
            v-model="suggestedRefereeFamilyName"
            style="width:72.22%; float:right;"
            size="small"
          ></el-input>
          <div class="littleTitle">Family Name</div>
        </div>
        <div style="width: 90%;float:right;margin-top:4%;margin-right:10%">
          <el-input
            v-model="suggestedRefereeAffiliation"
            style="width:72.22%; float:right;"
            size="small"
          ></el-input>
          <div class="littleTitle">Affiliation</div>
        </div>

        <div style="width: 90%;float:right;margin-top:4%;margin-right:10%">
          <el-input v-model="suggestedRefereeEmail" style="width:72.22%; float:right;" size="small"></el-input>
          <div class="littleTitle">E-mail</div>
        </div>
        <div style="width: 90%;float:right; padding-top:3%;margin-right:10%">
          <el-button
            style="float:right;width:10%;background: #527FA5; color: #FFFFFF; border: 1px solid #244158;"
            @click="saveData(1)"
            type="primary"
          >Save</el-button>
        </div>
        <div style="width: 90%;float:right; padding-top:16%;">
          <el-button
            style="float:right;width:22.22%;margin-left: 1.8%; background: #527FA5; color: #FFFFFF;margin-right:10%"
            @click="pageControl(1)"
          >Next step</el-button>
          <el-button
            style="float:right;width:22.22%;color: #527FA5; border: 1px solid #527FA5;"
            @click="pageControl(0)"
          >Previous step</el-button>
        </div>
      </div>
      <div v-show="suggestedTableData.length != 0">
        <div style="width: 100%;float:right;margin: 0 auto;">
          <el-table :data="suggestedTableData" style="width: 90%; float:right; margin-right: 5%;">
            <el-table-column label="Suggested Referee" min-width="300">
              <template slot-scope="scope">
                <div>
                  <div class="tableTitle">Name:</div>
                  {{ scope.row.firstName }} {{ scope.row.familyName }}
                </div>
                <div>
                  <div class="tableTitle">Affiliation:</div>
                  {{ scope.row.affiliation }}
                </div>
                <div>
                  <div class="tableTitle">E-mail:</div>
                  {{ scope.row.mail }}
                </div>
              </template>
            </el-table-column>
            <el-table-column min-width="40">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="editRow(scope.$index, scope.row, 1)">
                  <i class="el-icon-edit-outline"></i>
                </el-button>
                <el-button size="mini" type="text" @click="deleteRow(scope.$index, 1)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%;float:right; padding-top:2%">
            <div class="bor">
              <el-button
                type="text"
                size="mini"
                @click="addRefereeVisible = true"
                style="font-family: PingFang SC;
                      font-style: normal;
                      font-weight: 500;
                      font-size: 18px;
                      line-height: 25px;
                      text-align: right;
                      color: #C1C4CB;
                      width: 10.9%;
                      "
              >+Add referee</el-button>
            </div>
          </div>
          <el-dialog :visible.sync="editRefereeVisible" width="52.083%">
            <div class="dialogTitle">Edit referee</div>
            <div style="margin-right: 10%; margin-top:4%">
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="editRefereeFirstName"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">First Name</div>
              </div>
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="editRefereeFamilyName"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">Family Name</div>
              </div>

              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="editRefereeAffiliation"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">Affiliation</div>
              </div>
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input v-model="editRefereeEmail" style="width:65%; float:right;" size="small"></el-input>
                <div class="littleTitle">E-mail</div>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <div style="width: 100%;float:right; padding-top:6%; margin-right: 10%"></div>
              <el-button
                @click="editRefereeVisible = false"
                style="width:10%;color: #527FA5; border: 1px solid #527FA5;; margin-right: 2%;"
              >Cancel</el-button>
              <el-button
                @click="saveRow(1)"
                style="width:10%; background: #527FA5; color: #FFFFFF; margin-right: 10%;"
              >Save</el-button>
            </span>
          </el-dialog>
          <el-dialog :visible.sync="addRefereeVisible" width="52.083%">
            <div class="dialogTitle">Add referee</div>
            <div style="margin-right: 10%; margin-top:4%">
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="addRefereeFirstName"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">First Name</div>
              </div>
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="addRefereeFamilyName"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">Family Name</div>
              </div>

              <div style="width: 100%;float:right; padding-top:3%">
                <el-input
                  v-model="addRefereeAffiliation"
                  style="width:65%; float:right;"
                  size="small"
                ></el-input>
                <div class="littleTitle">Affiliation</div>
              </div>
              <div style="width: 100%;float:right; padding-top:3%">
                <el-input v-model="addRefereeEmail" style="width:65%; float:right;" size="small"></el-input>
                <div class="littleTitle">E-mail</div>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <div style="width: 100%;float:right; padding-top:6%; margin-right: 10%"></div>
              <el-button
                @click="addRefereeVisible = false"
                style="width:10%;color: #527FA5; border: 1px solid #527FA5;; margin-right: 2%;"
              >Cancel</el-button>
              <el-button
                @click="saveRow(3)"
                style="width:10%; background: #527FA5; color: #FFFFFF; margin-right: 10%;"
              >Save</el-button>
            </span>
          </el-dialog>
          <div style="width: 100%;float:right; padding-top:23.5%; margin-right:10%">
            <el-button
              style="float:right;width:22.22%;margin-left: 1.8%; background: #527FA5; color: #FFFFFF;"
              @click="pageControl(1)"
            >Next step</el-button>
            <el-button
              style="float:right;width:22.22%;color: #527FA5; border: 1px solid #527FA5;"
              @click="pageControl(0)"
            >Previous step</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-show="active == 3">
      <div style="width: 90%;float:right;margin-right:10%;padding-top:4.2%">
        <el-input
          type="textarea"
          placeholder="Please write your comment here to the editor."
          :rows="3"
          v-model="memo"
          style="width:72.22%; float:right;"
          :autosize="{ minRows: 6, maxRows: 6}"
        ></el-input>
        <div class="littleTitle">Memo</div>
      </div>
      <div style="width:100%;margin-top:3%;float:right;">
        <el-upload
          multiple
          action="http://magazine.ubanjiaoyu.com/api/submit/upload"
          style="float:right;width:32%;margin-right:43.3%; text-align: left;"
          accept=".pdf"
          :file-list="fileList"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
          :on-change="handleChange"
          :on-remove="handleRemove"
        >
          <el-button style="color: #527FA5;">Click to upload</el-button>
        </el-upload>

        <div class="littleTitle">
          <font color="red">*</font>
          File
        </div>
      </div>
      <div style="width:100%">
        <div class="hint">Please upload the pdf or word file. The limit size is 100Mb.</div>
      </div>

      <div style="width: 100%;float:right; padding-top:16%;">
        <el-button
          style="float:right;width:22.22%;margin-left: 1.8%; background: #527FA5; color: #FFFFFF;margin-right:10%"
          @click="pageControl(1)"
        >Preview</el-button>
        <el-button
          style="float:right;width:22.22%;color: #527FA5; border: 1px solid #527FA5;"
          @click="pageControl(0)"
        >Previous step</el-button>
      </div>
    </div>
    <div v-show="active == 4">
      <div class="checkInfoPage">
        <div class="checkInfoList">
          <div class="checkInfoContant">{{articleInfoTitle}}</div>
          <div class="checkInfoTitle">Title</div>
        </div>
        <div class="checkInfoList">
          <div class="checkInfoContant">{{articleInfoAbstract}}</div>
          <div class="checkInfoTitle">Abstract</div>
        </div>
        <div class="checkInfoList">
          <div class="checkInfoContant">{{articleInfoKeywords}}</div>
          <div class="checkInfoTitle">Keywords</div>
        </div>

        <div class="checkInfoList" v-for="(author, i) in authorTableData">
          <div class="checkInfoContant">
            <div class="checkInfoDetail">
              <div class="checkInfoDetailTitle">Name:</div>
              <div class="checkInfoDetailContant">{{ author.firstName }} {{ author.firstName }}</div>
            </div>
            <div class="checkInfoDetail">
              <div class="checkInfoDetailTitle">Affiliation:</div>
              <div class="checkInfoDetailContant">{{ author.affiliation }}</div>
            </div>
            <div class="checkInfoDetail">
              <div class="checkInfoDetailTitle">E-mail:</div>
              <div class="checkInfoDetailContant">{{ author.mail }}</div>
            </div>
            <div class="checkInfoDetail">
              <div class="checkInfoDetailTitle">Corresponding:</div>
              <div class="checkInfoDetailContant">{{ toWhether(author.corresponding) }}</div>
            </div>
            <div class="checkInfoDetail">
              <div class="checkInfoDetailTitle">Order:</div>
              <div class="checkInfoDetailContant">{{ toOrder(i+1) }}</div>
            </div>
          </div>
          <div class="checkInfoTitle">Author {{ toEnglish(i+1) }}</div>
        </div>

        <div class="checkInfoList" v-if="selectedId.length != 0">
          <div class="checkInfoContant">{{ selectedName }}</div>
          <div class="checkInfoTitle">Suggested Editor</div>
        </div>
        <div class="checkInfoList" v-for="(referee, i) in suggestedTableData">
          <div class="checkInfoContant">
            <div class="checkInfoDetail">
              <div class="checkInfoDetailTitle">Name:</div>
              <div class="checkInfoDetailContant">{{ referee.firstName }} {{ referee.firstName }}</div>
            </div>
            <div class="checkInfoDetail">
              <div class="checkInfoDetailTitle">Affiliation:</div>
              <div class="checkInfoDetailContant">{{ referee.affiliation }}</div>
            </div>
            <div class="checkInfoDetail">
              <div class="checkInfoDetailTitle">E-mail:</div>
              <div class="checkInfoDetailContant">{{ referee.mail }}</div>
            </div>
          </div>
          <div class="checkInfoTitle">Suggested Referee {{toEnglish(i+1)}}</div>
        </div>
        <div class="checkInfoList" v-if="memo.length != 0">
          <div class="checkInfoContant">{{memo}}</div>
          <div class="checkInfoTitle">Memo</div>
        </div>

        <div class="checkInfoList" v-for="(file, i) in fileURLList">
          <div class="checkInfoContant">
            <el-link :href="file.url">{{ file.name }}</el-link>
          </div>
          <div class="checkInfoTitle">File {{toEnglish( i + 1 )}}</div>
        </div>
      </div>
      <div style="width: 100%;float:right; padding-top:16%;">
        <el-button
          style="float:right;width:22.22%;margin-left: 1.8%; background: #527FA5; color: #FFFFFF;margin-right:10%"
          @click="submit()"
        >Submit</el-button>
        <el-button
          style="float:right;width:22.22%;color: #527FA5; border: 1px solid #527FA5;"
          @click="pageControl(0)"
        >Previous step</el-button>
      </div>
    </div>
    <div v-show="active == 5">
      <div style="padding-top:10%"></div>
      <div class="successfulLogo"></div>
      <div style="padding-top:2.3%"></div>
      <div class="successfulLogoText">Successful operation</div>
      <div class="prompt">
        <div class="promptText">
          Congratulations! Your paper has been submitted successfully. Please be noted that you will receive an email about this submission, in which you will find a reference number for your paper. You may send an email to
          <a
            href="mailto://info@globa-sci.org"
          >csiam-am@global-sci.org</a> for any inquiry about your paper, and please include this reference number in your email. Thanks very much for your support.
        </div>
      </div>
    </div>
    <div class="foot">
      If there is any question on the submission, please contact us at
      <a
        href="mailto://info@globa-sci.org"
      >info@global-sci.org</a>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
import { URL_PATH } from "@/config/config";
export default {
  data() {
    return {
      fileList: [],
      step: 0,
      active: 0,
      addAuthorVisible: false,
      editAuthorVisible: false,
      addRefereeVisible: false,
      editRefereeVisible: false,
      templateRadio: "",
      templateSelection: {},
      articleInfoTitle: "",
      articleInfoAbstract: "",
      articleInfoKeywords: "",
      editAuthorTitle: "",
      editAuthorFamilyName: "",
      editAuthorFirstName: "",
      editAuthorAffiliation: "",
      editAuthorEmail: "",
      authorInfoTitle: "",
      authorInfoFamilyName: "",
      authorInfoFirstName: "",
      authorInfoAffiliation: "",
      authorInfoEmail: "",
      addAuthorTitle: "",
      addAuthorFamilyName: "",
      addAuthorFirstName: "",
      addAuthorAffiliation: "",
      addAuthorEmail: "",
      fileURL: "",
      fileURLList: [],
      suggestedRefereeFamilyName: "",
      suggestedRefereeFirstName: "",
      suggestedRefereeAffiliation: "",
      suggestedRefereeEmail: "",
      editRefereeFamilyName: "",
      editRefereeFirstName: "",
      editRefereeAffiliation: "",
      editRefereeEmail: "",
      addRefereeFamilyName: "",
      addRefereeFirstName: "",
      addRefereeAffiliation: "",
      addRefereeEmail: "",
      memo: "",
      index: "",
      //articleInfo
      authorTableData: [],
      suggestedTableData: [],
      options: [{ id: "", value: "No editor", name: "No editor" }],
      titles: [
        {
          value: "Prof.",
          label: "Prof."
        },
        {
          value: "Dr.",
          label: "Dr."
        },
        {
          value: "Mr.",
          label: "Mr."
        },
        {
          value: "Mrs.",
          label: "Mrs."
        }
      ],
      titleTable: "",
      selectedName: "",
      selectedId: "",
      journalName: "",
      indexOfAuthor: 0
    };
  },
  mounted() {
    this.getEditorList();
    this.rowDrop();
    this.checkRefresh();
  },
  methods: {
    stepChange(num) {
      if (this.step >= num) {
        var flag = true;
        if (this.active == 0) {
          if (
            this.articleInfoTitle.length == 0 ||
            this.articleInfoAbstract.length == 0 ||
            this.articleInfoKeywords.length == 0
          ) {
            flag = false;
            this.$message({
              message: "You have unfilled information!",
              type: "warning"
            });
          }
        } else if (this.active == 3) {
          if (this.fileURLList.length == 0) {
            flag = false;
            this.$message({
              message: "You need upload file(s).",
              type: "warning"
            });
          }
        }
        if (flag == true) {
          this.active = num;
          this.changePage();
        }
      }
    },
    GetRequest() {
      const url = location.search; //获取url中"?"符后的字串
      let theRequest = new Object();
      if (url.indexOf("?") != -1) {
        let str = url.substr(1);
        strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
      }
      return theRequest;
    },
    toEnglish(number) {
      var stringNumber;
      var arr = [
        "zero",
        "one",
        "two",
        "three",
        "four",
        "five",
        "six",
        "seven",
        "eight",
        "nine",
        "ten",
        "eleven",
        "twelve",
        "thirteen",
        "fourteen",
        "fifteen",
        "sixteen",
        "seventeen",
        "eighteen",
        "nineteen"
      ];
      stringNumber = arr[number];
      return stringNumber;
    },
    toOrder(number) {
      var stringNumber;
      if (number == 1) {
        stringNumber = "1st";
      } else if (number == 2) {
        stringNumber = "2nd";
      } else {
        stringNumber = number + "rd";
      }
      return stringNumber;
    },
    toWhether(boolean) {
      if (boolean == true) {
        return "yes";
      } else {
        return "no";
      }
    },
    checkRefresh() {
      if (performance.navigation.type != 0) {
        this.$api
          .getCache({})
          .then(({ data }) => {
            (this.articleInfoKeywords = data.data.keywords || ""),
              (this.articleInfoTitle = data.data.title || ""),
              (this.articleInfoAbstract = data.data.description || ""),
              (this.suggestedTableData = data.data.audit_advice || []),
              (this.memo = data.data.remark || ""),
              (this.authorTableData = data.data.author || []),
              (this.fileURLList = data.data.url_list || []),
              (this.journalName = data.data.journal_name || ""),
              (this.selectedId = data.data.editor_advice || ""),
              (this.selectedName = data.data.selected_name || ""),
              (this.active = data.data.page || ""),
              (this.fileList = data.data.file_list || []),
              (this.indexOfAuthor = data.data.index_of_author),
              (this.fileURL = data.data.url_id || "");
            Number(this.active);
            var i = 0;
            if (this.authorTableData != []) {
              for (i = 0; i < this.authorTableData.length; i++) {
                if (this.authorTableData[i].is_correspond == 0) {
                  this.authorTableData[i].corresponding = false;
                } else if (this.authorTableData[i].is_correspond == 1) {
                  this.authorTableData[i].corresponding = true;
                  this.templateRadio = this.authorTableData[i].index;
                }
              }
            }
            this.changePage();
          })
          .catch(({ error }) => {
            console.log(error);
          });
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.authorTableData.splice(oldIndex, 1)[0];
          _this.authorTableData.splice(newIndex, 0, currRow);
        }
      });
    },
    getEditorList: function() {
      this.journalName = this.getQueryString("journal");
      //this.journalName = "test";
      this.$api
        .editor({
          journal_name: this.journalName
        })
        .then(({ data }) => {
          if (data.stat != 0) {
            this.$message({
              message: "editor error",
              type: "warning"
            });
          }
          var i = 0;
          var j = 0;
          for (i = 0; i < data.data.length; i++) {
            for (j = 0; j < data.data[i].length; j++) {
              this.options.splice(0, 0, data.data[i][j]);
            }
          }
        })

        .catch(({ error }) => {
          this.$message({
            message: "editor error",
            type: "warning"
          });
        });

      this.$api
        .cache({
          journal_name: this.journalName
        })
        .then(({ data }) => {
          if (data.stat != 0) {
            this.$message({
              message: "cache error",
              type: "warning"
            });
          }
        })
        .catch(({ error }) => {});
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURI(r[2]);
      }
      return null;
    },
    editRow(index, rows, page) {
      if (page == 0) {
        this.index = index;
        this.editAuthorVisible = true;
        this.editAuthorTitle = rows.title;
        this.editAuthorFirstName = rows.firstName;
        this.editAuthorFamilyName = rows.familyName;
        this.editAuthorAffiliation = rows.affiliation;
        this.editAuthorEmail = rows.mail;
      } else if (page == 1) {
        this.index = index;
        this.editRefereeVisible = true;
        this.editRefereeFirstName = rows.firstName;
        this.editRefereeFamilyName = rows.familyName;
        this.editRefereeAffiliation = rows.affiliation;
        this.editRefereeEmail = rows.mail;
      }
    },
    saveRow(page) {
      //0是作者编辑页面保存 1是评论员编辑页面保存 2是作者添加页保存 3是评论员添加页保存
      var flag = true;
      if (page == 0) {
        if (
          this.editAuthorTitle == "" ||
          this.editAuthorFirstName == "" ||
          this.editAuthorFamilyName == "" ||
          this.editAuthorAffiliation == "" ||
          this.editAuthorEmail == ""
        ) {
          flag = false;
          this.$message({
            message: "You have unfilled information!",
            type: "warning"
          });
        } else if (this.editAuthorEmail.indexOf("@") == -1) {
          flag = false;
          this.$message({
            message: "Your email format is wrong!",
            type: "warning"
          });
        }
      } else if (page == 1) {
        if (
          this.editRefereeFirstName == "" ||
          this.editRefereeFamilyName == "" ||
          this.editRefereeAffiliation == "" ||
          this.editRefereeEmail == ""
        ) {
          flag = false;
          this.$message({
            message: "You have unfilled information!",
            type: "warning"
          });
        } else if (this.editRefereeEmail.indexOf("@") == -1) {
          flag = false;
          this.$message({
            message: "Your email format is wrong!",
            type: "warning"
          });
        }
      } else if (page == 2) {
        if (
          this.addAuthorTitle == "" ||
          this.addAuthorFirstName == "" ||
          this.addAuthorFamilyName == "" ||
          this.addAuthorAffiliation == "" ||
          this.addAuthorEmail == ""
        ) {
          flag = false;
          this.$message({
            message: "You have unfilled information!",
            type: "warning"
          });
        } else if (this.addAuthorEmail.indexOf("@") == -1) {
          flag = false;
          this.$message({
            message: "Your email format is wrong!",
            type: "warning"
          });
        }
      } else if (page == 3) {
        if (
          this.addRefereeFirstName == "" ||
          this.addRefereeFamilyName == "" ||
          this.addRefereeAffiliation == "" ||
          this.addRefereeEmail == ""
        ) {
          flag = false;
          this.$message({
            message: "You have unfilled information!",
            type: "warning"
          });
        } else if (this.addRefereeEmail.indexOf("@") == -1) {
          flag = false;
          this.$message({
            message: "Your email format is wrong!",
            type: "warning"
          });
        }
      }

      if (flag == true) {
        if (page == 0) {
          var authorTableData = {
            title: this.editAuthorTitle,
            firstName: this.editAuthorFirstName,
            familyName: this.editAuthorFamilyName,
            affiliation: this.editAuthorAffiliation,
            mail: this.editAuthorEmail,
            corresponding: this.authorTableData[this.index].corresponding,
            index: this.authorTableData[this.index].index
          };
          this.authorTableData.splice(this.index, 1, authorTableData);
          this.editAuthorVisible = false;
        } else if (page == 1) {
          var suggestedTableData = {
            firstName: this.editRefereeFirstName,
            familyName: this.editRefereeFamilyName,
            affiliation: this.editRefereeAffiliation,
            mail: this.editRefereeEmail
          };
          this.suggestedTableData.splice(this.index, 1, suggestedTableData);
          this.editRefereeVisible = false;
        } else if (page == 2) {
          this.indexOfAuthor = this.indexOfAuthor + 1;
          var authorTableData = {
            title: this.addAuthorTitle,
            firstName: this.addAuthorFirstName,
            familyName: this.addAuthorFamilyName,
            affiliation: this.addAuthorAffiliation,
            mail: this.addAuthorEmail,
            corresponding: false,
            index: this.indexOfAuthor
          };
          this.authorTableData.splice(0, 0, authorTableData);
          this.addAuthorVisible = false;
          this.addAuthorTitle = "";
          this.addAuthorFamilyName = "";
          this.addAuthorFirstName = "";
          this.addAuthorAffiliation = "";
          this.addAuthorEmail = "";
        } else if (page == 3) {
          var suggestedTableData = {
            firstName: this.addRefereeFirstName,
            familyName: this.addRefereeFamilyName,
            affiliation: this.addRefereeAffiliation,
            mail: this.addRefereeEmail
          };
          this.suggestedTableData.splice(0, 0, suggestedTableData);
          this.addRefereeVisible = false;
          this.addRefereeFamilyName = "";
          this.addRefereeFirstName = "";
          this.addRefereeAffiliation = "";
          this.addRefereeEmail = "";
        }
      }
    },
    deleteRow(index, page) {
      var flag = true;
      if (page == 0) {
        if (this.authorTableData.length == 1) {
          flag = false;
          this.$message({
            message: "The table must have one author",
            type: "warning"
          });
        }
      }
      if (flag == true) {
        if (page == 0) {
          this.authorTableData.splice(index, 1);
        } else {
          this.suggestedTableData.splice(index, 1);
        }
      }
    },
    getTemplateRow(index, row) {
      var i = 0;
      for (i < 0; i < this.authorTableData.length; i++) {
        this.authorTableData[i].corresponding = false;
      }
      this.templateRadio = row.index;
      row.corresponding = true;
    },
    submit() {
      this.$confirm(
        "You are going to submit the paper to the editorial office. Please be noted that after the submission, there would be no way to change anything about your paper through the webpage. <br>So please click YES if you are sure about the submission. Otherwise, you may click CANCEL to go back for further revision. Please contact csiam-am@global-sci.org for help.",
        {
          confirmButtonText: "Yes",
          cancelButtonText: "Cancel",
          dangerouslyUseHTMLString: true
        }
      )
        .then(() => {
          this.active++;
          var i = 0;
          var authorTableData = [];
          for (i = 0; i < this.authorTableData.length; i++) {
            if (this.authorTableData[i].corresponding == true) {
              authorTableData[i] = {
                title: this.authorTableData[i].title,
                firstName: this.authorTableData[i].firstName,
                familyName: this.authorTableData[i].familyName,
                affiliation: this.authorTableData[i].affiliation,
                mail: this.authorTableData[i].mail,
                is_correspond: 1
              };
            } else {
              authorTableData[i] = {
                title: this.authorTableData[i].title,
                firstName: this.authorTableData[i].firstName,
                familyName: this.authorTableData[i].familyName,
                affiliation: this.authorTableData[i].affiliation,
                mail: this.authorTableData[i].mail,
                is_correspond: 0
              };
            }
          }
          this.fileURL = this.fileList[0].response.url_id;
          if (this.fileList.length > 1) {
            for (i = 1; i < this.fileList.length; i++) {
              this.fileURL =
                this.fileURL + "," + this.fileList[i].response.url_id;
            }
          }
          this.$api
            .submitSubmission({
              keywords: this.articleInfoKeywords,
              title: this.articleInfoTitle,
              description: this.articleInfoAbstract,
              audit_advice: this.suggestedTableData,
              remark: this.memo,
              author: authorTableData,
              url_id: this.fileURL,
              journal_name: this.journalName,
              editor_advice: this.selectedId
            })
            .then(({ data }) => {
              if (data.stat != 0) {
                this.$message({
                  message: "submitSubmission error",
                  type: "warning"
                });
                console.log(data);
              } else {
                console.log(data);
              }
            })
            .catch(({ error }) => {
              console.log(error);
            });
        })
        .catch(error => {
          console.log(error);
        });
    },
    getQueryString(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    pageControl(Controller) {
      var flag = true;
      if (this.active == 0) {
        if (
          (this.articleInfoTitle.length == 0 ||
            this.articleInfoAbstract.length == 0 ||
            this.articleInfoKeywords.length == 0) &&
          Controller == 1
        ) {
          flag = false;
          this.$message({
            message: "You have unfilled information!",
            type: "warning"
          });
        }
      } else if (this.active == 1) {
        var i = 0;
        var correspondingFlag = false;
        for (i = 0; i < this.authorTableData.length; i++) {
          if (this.authorTableData[i].corresponding == true) {
            correspondingFlag = true;
          }
        }
        if (correspondingFlag == false && Controller == 1) {
          flag = false;
          this.$message({
            message: "Your must select a corresponding!",
            type: "warning"
          });
        }
      } else if (this.active == 3) {
        if (this.fileURLList.length == 0 && Controller == 1) {
          flag = false;
          this.$message({
            message: "You need upload file(s).",
            type: "warning"
          });
        }
      }
      if (Controller == 0) {
        this.active--;
        this.changePage();
      }
      if (flag == true) {
        if (Controller == 1) {
          this.active++;
          this.changePage();
        }
      }
    },
    changePage() {
      if (this.active == 1) {
        this.$api
          .cache({
            keywords: this.articleInfoKeywords,
            title: this.articleInfoTitle,
            description: this.articleInfoAbstract,
            page: this.active
          })
          .then(({ data }) => {
            if (data.stat != 0) {
              this.$message({
                message: "cache error",
                type: "warning"
              });
            }
          })
          .catch(({ error }) => {
            console.log(error);
          });
      }
      if (this.active == 2) {
        var i = 0;
        var authorTableData = [];
        for (i = 0; i < this.authorTableData.length; i++) {
          if (this.authorTableData[i].corresponding == true) {
            authorTableData[i] = {
              title: this.authorTableData[i].title,
              firstName: this.authorTableData[i].firstName,
              familyName: this.authorTableData[i].familyName,
              affiliation: this.authorTableData[i].affiliation,
              mail: this.authorTableData[i].mail,
              is_correspond: 1,
              index: this.authorTableData[i].index
            };
          } else {
            authorTableData[i] = {
              title: this.authorTableData[i].title,
              firstName: this.authorTableData[i].firstName,
              familyName: this.authorTableData[i].familyName,
              affiliation: this.authorTableData[i].affiliation,
              mail: this.authorTableData[i].mail,
              is_correspond: 0,
              index: this.authorTableData[i].index
            };
          }
        }
        this.$api
          .cache({
            author: authorTableData,
            index_of_author: this.indexOfAuthor,
            page: this.active
          })
          .then(({ data }) => {
            if (data.stat != 0) {
              this.$message({
                message: "cache error",
                type: "warning"
              });
            }
          })
          .catch(({ error }) => {
            console.log(error);
          });
      }
      if (this.active == 3) {
        this.$api
          .cache({
            editor_advice: this.selectedId,
            selected_name: this.selectedName,
            page: this.active,
            audit_advice: this.suggestedTableData,
            page: this.active
          })
          .then(({ data }) => {
            if (data.stat != 0) {
              this.$message({
                message: "cache error",
                type: "warning"
              });
            }
          })
          .catch(({ error }) => {
            console.log(error);
          });
      }
      if (this.active == 4) {
        this.$api
          .cache({
            remark: this.memo,
            url_list: this.fileURLList,
            url_id: this.fileURL,
            file_list: this.fileList,
            page: this.active
          })
          .then(({ data }) => {
            if (data.stat != 0) {
              this.$message({
                message: "cache error",
                type: "warning"
              });
            }
          })
          .catch(({ error }) => {
            console.log(error);
          });
      }
      if (this.step < this.active) {
        this.step = this.active;
      }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList.slice(-3);
      for (let i = 0; i < this.fileURLList.length; i++) {
        if (file.name == this.fileURLList[i].name)
          this.fileURLList.splice(i, 1);
      }
      this.fileURL = this.fileList[0].response.url_id;
      if (this.fileList.length > 1) {
        for (let i = 1; i < this.fileList.length; i++) {
          this.fileURL = this.fileURL + "," + this.fileList[i].response.url_id;
        }
      }
    },
    handleAvatarSuccess(res, file) {
      var fileURLList = {
        url: "https://magazine.ubanjiaoyu.com/api/submit/upload" + res.url,
        name: file.name
      };
      this.fileURLList.splice(0, 0, fileURLList);
      this.fileURL = this.fileList[0].response.url_id;
      if (this.fileList.length > 1) {
        for (let i = 1; i < this.fileList.length; i++) {
          this.fileURL = this.fileURL + "," + this.fileList[i].response.url_id;
        }
      }
      this.$message({
        message: "You have successfully uploaded this file",
        type: "success"
      });
    },
    beforeAvatarUpload(file) {
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isLt100M) {
        this.$message.error("More than 100M!");
      }
      return isLt100M;
    },

    saveData(page) {
      var flag = true;
      if (page == 0) {
        if (
          this.authorInfoTitle == "" ||
          this.authorInfoFirstName == "" ||
          this.authorInfoFamilyName == "" ||
          this.authorInfoAffiliation == "" ||
          this.authorInfoEmail == ""
        ) {
          flag = false;
          this.$message({
            message: "You have unfilled information ",
            type: "warning"
          });
        } else if (this.authorInfoEmail.indexOf("@") == -1) {
          flag = false;
          this.$message({
            message: "Your email format is wrong!",
            type: "warning"
          });
        }
      } else {
        if (
          this.suggestedRefereeFirstName == "" ||
          this.suggestedRefereeFamilyName == "" ||
          this.suggestedRefereeAffiliation == "" ||
          this.suggestedRefereeEmail == ""
        ) {
          flag = false;
          this.$message({
            message: "You have unfilled information ",
            type: "warning"
          });
        } else if (this.suggestedRefereeEmail.indexOf("@") == -1) {
          flag = false;
          this.$message({
            message: "Your email format is wrong!",
            type: "warning"
          });
        }
      }
      if (flag == true) {
        if (page == 0) {
          var authorTableData = {
            title: this.authorInfoTitle,
            firstName: this.authorInfoFirstName,
            familyName: this.authorInfoFamilyName,
            affiliation: this.authorInfoAffiliation,
            mail: this.authorInfoEmail,
            corresponding: false.title,
            index: this.indexOfAuthor
          };
          this.authorTableData.splice(0, 0, authorTableData);
        } else if (page == 1) {
          var suggestedTableData = {
            firstName: this.suggestedRefereeFirstName,
            familyName: this.suggestedRefereeFamilyName,
            affiliation: this.suggestedRefereeAffiliation,
            mail: this.suggestedRefereeEmail
          };
          this.suggestedTableData.splice(0, 0, suggestedTableData);
        }
      }
    },
    currentSel(selVal) {
      this.selectedId = selVal.id || "";
      console.log(this.selectedId.length);
      this.selectedName = selVal.name || "";
    }
  }
};
</script>


<style scoped>
.prompt {
  background: #f7f8f9;
  border-radius: 8px;
  width: 71.8%;
  margin-top: 4%;
  margin-left: 14%;
}
.promptText {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  padding: 4%;
  color: #333333;
  text-align: left;
}
.drag {
  width: 20px;
  padding-top: 10px;
  /* padding-top: 1%; */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  margin: 0 auto;
  background-image: url(../assets/drag.png);
  /* background-color: #7ebf50; */
}
.articleInfoStyle {
  width: 90%;
  float: right;
  margin-right: 10%;
}
.successfulLogo {
  width: 11.1%;
  padding-top: 11.5%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  margin: 0 auto;
  background-image: url(../assets/v.png);
}
.successfulLogoText {
  font-family: SF Pro Display;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 29px;
  text-align: right;
  color: #7ebf50;
  float: left;
  width: 100%;
  text-align: center;
}
.checkInfoPage {
  margin-top: 4%;
}
.checkInfoList {
  margin-top: 2%;
  width: 100%;
  float: right;
}
.checkInfoTitle {
  float: right;
  margin-right: 2%;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  text-align: right;
  color: #333333;
  width: 25%;
}
.checkInfoContant {
  float: right;
  width: 73%;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  text-align: left;
}
.checkInfoDetail {
  text-align: left;
}
.checkInfoDetailTitle {
  float: left;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
}
.checkInfoDetailContant {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  text-align: left;
}

.foot {
  text-align: left;
  width: 90%;
  float: left;
  padding-top: 9.2%;
  padding-bottom: 4%;
  margin-left: 10%;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
}
.bor {
  display: block;
  border: 1px dashed #c1c4cb;
  border-radius: 4px;
  width: 87%;
  margin: 0 auto;
}
.content {
  float: right;
  margin-top: 5.2%;
  width: 100%;
}
.littleTitle {
  float: right;
  margin-right: 2%;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  text-align: right;

  color: #000000;
}

.backgroundPaper {
  float: left;
  width: 52%;
  margin:0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.title {
  margin: 4.2% auto;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 42px;
  text-align: center;
  color: #29465c;
}
.dialogTitle {
  margin: 1% auto;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  /* identical to box height */

  color: #527fa5;
}
.tableTitle {
  float: left;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
}
.hint {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-align: right;
  color: #626468;
  float: left;
  margin-top: 1%;
  margin-left: 25.1%;
}
</style>

